@import '~styles/vars';
@import '~styles/extendables';
@import '~styles/mixins';

.loading {
  color: $color-white;

  &:not(.nobg) {
    @include overlay-bg;
  }

  &.nobg {
    .center {
      .sk-cube-grid {
        .sk-cube {
          background: $color-grey-shade-2;
        }
      }
    }
  }

  &.fixed {
    @extend %app-width;
    position: fixed;
    height: 100vh;
  }

  &.message {
    .center {
      width: 200px;
      margin: -75px 0 0 -100px;
    }
  }

  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -20px;
    text-align: center;

    span {
      display: block;
      font-size: 18px;
      font-style: italic;
    }

    .sk-cube-grid {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-bottom: 10px;

      .sk-cube {
        width: calc(33% - 2px);
        height: 33%;
        background: $color-yellow;
        float: left;
        animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
        margin: 1px;
      }

      .sk-cube1 {
        animation-delay: 0.2s;
      }
      .sk-cube2 {
        animation-delay: 0.3s;
      }
      .sk-cube3 {
        animation-delay: 0.4s;
      }
      .sk-cube4 {
        animation-delay: 0.1s;
      }
      .sk-cube5 {
        animation-delay: 0.2s;
      }
      .sk-cube6 {
        animation-delay: 0.3s;
      }
      .sk-cube7 {
        animation-delay: 0s;
      }
      .sk-cube8 {
        animation-delay: 0.1s;
      }
      .sk-cube9 {
        animation-delay: 0.2s;
      }
    }
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
